import React from "react";
import "./index.less";
import classNames from "classnames";
import Button1 from "../../../public/assets/home/menu1.svg";
import Button1Select from "../../../public/assets/home/menu1-select.svg";

import Button2 from "../../../public/assets/home/menu2.svg";
import Button2Select from "../../../public/assets/home/menu2-select.svg";

import Button3 from "../../../public/assets/home/menu3.svg";
import Button3Select from "../../../public/assets/home/menu3-select.svg";

export function PrimaryMenuItem({ children, selected, onClick }) {
    return (
        <div onClick={onClick} className={classNames(["ui-button", "center", "primary", { selected }])}>
            {selected ? <Button1Select /> : <Button1 />}
            <div className="ui-button-body center">{children}</div>
        </div>
    );
}

export function SecondMenuItem({ children, selected, onClick }) {
    return (
        <div onClick={onClick} className={classNames(["ui-button", "center", "second", { selected }])}>
            {selected ? <Button2Select /> : <Button2 />}
            <div className="ui-button-body center">{children}</div>
        </div>
    );
}

export function ThirdMenuItem({ children, selected, onClick }) {
    return (
        <div onClick={onClick} className={classNames(["ui-button", "center", "third", { selected }])}>
            {selected ? <Button3Select /> : <Button3 />}
            <div className="ui-button-body center">{children}</div>
        </div>
    );
}
